<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>socket.io test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' integrity='sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==' crossorigin='anonymous'></script>
</head>

<body>
    <div id="msg"></div>
    <script>
        const socket = io({
            transports: ['websocket']
        });
        console.log(socket.id); // undefined

        socket.on('connect', () => {
            console.log(socket.id); // 'G5p5...'
            $('#msg').append('<div>socket.id=' + socket.id + '</div>');
        });

        socket.on('message', (data) => {
            console.log(data);
            $('#msg').append('<div>received: ' + JSON.stringify(data) + '</div>');
        });

        var cnt = 0;
        setInterval(() => {
            cnt++;
            var content = {
                from: 'client',
                content: 'hello:' + cnt
            };
            console.log('send count: ' + cnt);
            $('#msg').append('<div>' + 'send: ' + JSON.stringify(content) + '</div>');
            socket.send(content)
        }, 1000);
    </script>
</body>

</html>